<template>
  <div class="layout bg-color-w padding-tb10">

    <div class="flex-col group_4 space-y-12">
      <div class="flex-row justify-between items-baseline">
        <span class="font_5">宠物服务</span>
        <span class="font_2 text_6">价格便宜 | 担保交易</span>
      </div>
      <div class="flex-row space-x-8" style="display:flex">
        <div style="padding:5px 2px;flex:1;margin:10px 5px;" class="flex-col justify-start items-center"  :class="['text-wrapper_' + index]"  v-for="(item, index) in res.list" :key="index">
          <span class="font_2 "  style="font-size:12px;">{{ item.title }}</span>
        </div>
      </div>
    </div>





  </div>



</template>
<script>
export default {
  props: ["res"],
};
</script>
<style lang="scss" scoped>






/************************************************************
** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
** 否则页面将无法正常显示                                  **
************************************************************/

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
  'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

view,
image,
text {
  box-sizing: border-box;
  flex-shrink: 0;
}

#app {
  width: 100vw;
  height: 100vh;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.relative {
  position: relative;
}


.group_4 {
  padding-left: 40rpx;
  padding-right: 36rpx;
  .font_5 {
    font-size: 32rpx;
    font-family: HarmonyOSSansSC;
    line-height: 30rpx;
    color: #081329;
  }
  .font_2 {
    font-size: 24rpx;
    font-family: HarmonyOSSansSC;
    line-height: 22rpx;
    color: #666e7a;
  }
  .text_6 {
    line-height: 23rpx;
    opacity: 0.6;
  }
  .space-x-8 {
    & > view:not(:first-child),
    & > text:not(:first-child),
    & > image:not(:first-child) {
      margin-left: 16rpx;
    }
    .text-wrapper_2 {
      padding: 28rpx 0;
      flex: 1 1 120rpx;
      background-color: #ffbd521a;
      border-radius: 10rpx;
      overflow: hidden;
      height: 80rpx;
    }
    .text-wrapper_3 {
      padding: 28rpx 0;
      flex: 1 1 120rpx;
      background-color: #6d6a6b1a;
      border-radius: 10rpx;
      overflow: hidden;
      height: 80rpx;
    }
    .text-wrapper_4 {
      padding: 28rpx 0;
      flex: 1 1 120rpx;
      background-color: #9093ff1a;
      border-radius: 10rpx;
      overflow: hidden;
      height: 80rpx;
    }
    .text-wrapper_5 {
      padding: 28rpx 0;
      flex: 1 1 120rpx;
      background-color: #fe507e1a;
      border-radius: 10rpx;
      overflow: hidden;
      height: 80rpx;
    }
    .text-wrapper_6 {
      margin-right: 4rpx;
      padding: 28rpx 0;
      flex: 1 1 120rpx;
      background-color: #5ab2ff1a;
      border-radius: 10rpx;
      overflow: hidden;
      height: 80rpx;
    }
  }
}
.space-y-12 {
  & > view:not(:first-child),
  & > text:not(:first-child),
  & > image:not(:first-child) {
    margin-top: 24rpx;
  }
}

.font_2 {
  font-size: 24rpx;
  font-family: HarmonyOSSansSC;
  line-height: 22rpx;
  color: #666e7a;
}
.group_4 {
  padding-left: 40rpx;
  padding-right: 36rpx;
}
.font_5 {
  font-size: 32rpx;
  font-family: HarmonyOSSansSC;
  line-height: 30rpx;
  color: #081329;
}
.text_6 {
  line-height: 23rpx;
  opacity: 0.6;
}
.space-x-8 > view:not(:first-child),
.space-x-8 > text:not(:first-child),
.space-x-8 > image:not(:first-child) {
  margin-left: 16rpx;
}
.text-wrapper_0 {
  padding: 28rpx 0;
  flex: 1 1 120rpx;
  background-color: #ffbd521a;
  border-radius: 10rpx;
  overflow: hidden;
  height: 80rpx;
}
.text-wrapper_1 {
  padding: 28rpx 0;
  flex: 1 1 120rpx;
  background-color: #6d6a6b1a;
  border-radius: 10rpx;
  overflow: hidden;
  height: 80rpx;
}
.text-wrapper_2 {
  padding: 28rpx 0;
  flex: 1 1 120rpx;
  background-color: #9093ff1a;
  border-radius: 10rpx;
  overflow: hidden;
  height: 80rpx;
}
.text-wrapper_3 {
  padding: 28rpx 0;
  flex: 1 1 120rpx;
  background-color: #fe507e1a;
  border-radius: 10rpx;
  overflow: hidden;
  height: 80rpx;
}
.text-wrapper_4 {
  margin-right: 4rpx;
  padding: 28rpx 0;
  flex: 1 1 120rpx;
  background-color: #5ab2ff1a;
  border-radius: 10rpx;
  overflow: hidden;
  height: 80rpx;
}
.space-y-12 > view:not(:first-child),
.space-y-12 > text:not(:first-child),
.space-y-12 > image:not(:first-child) {
  margin-top: 24rpx;
}
</style>
